import { type ClassValue, cn } from "common-web";
import type { FunctionalComponent as FC, HTMLAttributes, StyleValue, VNode } from "vue";
import theme from "@/common/theme";

type PanelProps = {
  titleClass?: ClassValue;
  titleStyle?: StyleValue;
  bodyClass?: ClassValue;
  bodyStyle?: StyleValue;
} & HTMLAttributes;

type PanelSlots = {
  default: () => VNode;
  title: () => VNode;
};

/**
 * 嵌套组件/slots 示例
 */
const Panel: FC<PanelProps, {}, PanelSlots> = (p, { slots }) => {
  return (
    <div class={cn("border", [theme.borderRadius, theme.borderColor, theme.shadow], p.class)}>
      {slots.title && (
        <div
          class={cn(
            "border-b px-4 py-2 h-12 flex items-center",
            [theme.borderColor, theme.borderTopRadius],
            p.titleClass,
          )}
          style={p.titleStyle}
        >
          {slots.title()}
        </div>
      )}
      <div class={cn("px-4 py-2", theme.borderBottomRadius, p.bodyClass)} style={p.bodyStyle}>
        {slots.default()}
      </div>
    </div>
  );
};

export default Panel;
